<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title>简易选项卡</title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0;
        }
        .all
        {
            border: 1px solid;
            width: 600px;
            height: 120px;
            margin: 50px auto;
        }
        header
        {
            width: 100%;
            height: 40px;
            background-color: black;
        }
        header div
        {
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
        }
        div.current
        {
            background-color: lightgray;
            color: black;
        } 
        ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
            height: 80px;
            width: 100%;
            line-height: 40px;
            text-align: center;
        }
        ul li
        {
            display: none;
        }
        ul li.text
        {
            display: block;
        } 
    </style>
</head>
<body>
    <script src="./jquery.js"></script>
    <section class="all">
        <header>
            <div class="current">选项一</div>
            <div>选项二</div>
            <div>选项三</div>
        </header>
        <ul>
            <li class="text">薯片<br>可乐</li>
            <li>牛奶<br>咖啡</li>
            <li>饼干<br>奶茶</li>
        </ul>
    </section>
    
    
</body>
</html>

<script>



window.onload = function(index)
{
    $('div').each(function(index)
    {
        $(this).mouseover(function()
        {
            $(this).css('background-color','lightgray').css('color','black')
            .siblings().css('background-color','black').css('color','white');
            $('li').eq(index).css('display','block').siblings().css('display','none');
        });
    });
    
    
    

}
</script>